<template>
	<div class="transport-warp" style="margin-top: 0;">
		<div class="identity-type">
			<span>基本信息</span>
		</div>
		<div class="essen_list  transport_after transport_after2">
			<p>
				<span>车牌号</span>
				<input type="" name="" class="carNo" v-model="carNoVal" placeholder="请填写车牌号" />
			</p>
			<p>
				<span>司机姓名</span>
				<input type="" name="" class="driver" v-model="driverVal" placeholder="请填写司机姓名" />
			</p>
			<p>
				<span>司机电话</span>
				<input type="" name="" class="phone" v-model="phoneVal" placeholder="请填写司机电话" />
			</p>
			<p>
				<span>司机身份证</span>
				<input type="" name="" class="idCard" v-model="idVal" placeholder="请填写司机身份证" />
			</p>
			<p>
				<span>装车时间</span>
				<input type="" name="" class="uploadTime" v-model="selectedValue" @focus="selectData" placeholder="请选择装车时间" />
			</p>
			<p class="time">
				<span>预计到达时间</span>
				<input type="" name="" class="planTime" v-model="arriveValue" @focus="arriveData" placeholder="请选择预计到达时间" />
			</p>
			<p>
				<span>装车物料总量</span>
				<input type="" name="" class="weight" v-model="weightVal" disabled="disabled" style="border: 0;" /><em>吨</em>
			</p>
		</div>
		<!--物料列表-->
		<div class="identity-type">
			<span>物料列表</span>
			<i @click="addMater">添加装车物料</i>
		</div>
		<div class="material-list">
			<ul class="material_list transport-list">
				<!--<li>
						<p>
							<span>冰箱压缩机</span>
							<img src="../../img/right.png" />
						</p>
						<p>
							<span>物料重量</span>
							<b>556.34<em>吨</em></b>
						</p>
						<p>
							<span>订单编号</span>
							<b>HSGFHGKJH2017564654</b>
						</p>

					</li>-->
			</ul>
			<ol class="transport_photo_list">
				<form name="form1" id="form1" v-show="showing">
					<li class="shooseimg li1" style="position: relative;">
						<input type="" id="img1" class="upload_pic upload" style="display: none;" />
						<canvas class="cvs" id="cvs1" width="100" height="100"></canvas>
						<img id="pic1" src="../../images/squarePhoto.png" />
						<span>车牌号</span>
					</li>
					<li class="shooseimg li2">
						<input type="" id="img2" class="upload_pic upload" style="display: none;" />
						<canvas class="cvs" id="cvs2" width="100" height="100"></canvas>
						<img id="pic2" src="../../images/squarePhoto.png" />
						<span>司机照片1</span>
					</li>
					<li class="shooseimg li3">
						<input type="" id="img3" class="upload_pic upload" style="display: none;" />
						<canvas class="cvs" id="cvs3" width="100" height="100"></canvas>
						<img id="pic3" src="../../images/squarePhoto.png" />
						<span>司机照片2</span>
					</li>
					<li class="shooseimg li4">
						<input type="" id="img4" class="upload_pic upload" style="display: none;" />
						<canvas class="cvs" id="cvs4" width="100" height="100"></canvas>
						<img id="pic4" src="../../images/squarePhoto.png" />
						<span>身份证正面</span>
					</li>
				</form>

			</ol>
			<p v-show="showing">磅单(可传多张)</p>
			<ol class="transport_photo_list">
				<form method="post" id="form2" action="##" enctype="multipart/form-data">
					<div class="weui-cell" style="padding: 0;">
						<div class="weui-cell__bd">
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files">

								</ul>
								<div class="weui-uploader__input-box" v-show="showing">
									<input id="uploaderInput" name="file0" style="display: none;" class="weui-uploader__input js_file" type="file"
									 accept="image/*">
								</div>
							</div>
						</div>
					</div>
				</form>
			</ol>
			<div class="demos-content-padded">
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default default" style="float: left;background: #e5e5e5;">取消</a>
				<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary confirm" style="float: right;margin-top: 0;background: #28c81e;">确定</a>
				<!--<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary delete" style="float: right;background: #f65555;">删除</a>-->
			</div>
		</div>
		<div class="weui-gallery" style="display: none">
			<span class="weui-gallery__img"></span>
		</div>
		<div class="pickerPop" @touchmove.prevent>
			<!-- 年月日时分选择 -->
			<mt-datetime-picker lockScroll="true" ref="datePicker" v-model="dateVal" class="myPicker" type="datetime"
			 year-format="{value}" month-format="{value}" date-format="{value}" hour-format="{value}" minute-format="{value}"
			 second-format="{value}" @confirm="dateConfirm()">
			</mt-datetime-picker>
			<mt-datetime-picker lockScroll="true" ref="datePickers" v-model="dateValue" class="myPicker" type="datetime"
			 year-format="{value}" month-format="{value}" date-format="{value}" hour-format="{value}" minute-format="{value}"
			 second-format="{value}" @confirm="arriveConfim()">
			</mt-datetime-picker>
		</div>
	</div>
</template>

<script>
	import {
		DatetimePicker
	} from 'mint-ui'
	import {
		formatDateMin,
		checkMobile,
		checkID
	} from '../../config/mUtils'
	import {
		TopTips
	} from 'we-vue'
	export default {
		data() {
			return {
				QueryCarNo: this.$route.query.carNo,
				QueryOrderNo: this.$route.query.orderNo,
				dateVal: '',
				dateValue: '',
				selectedValue: '', //装车时间
				arriveValue: '', //预计到达时间
				carNoVal: '', //车牌号
				driverVal: '', //司机姓名
				phoneVal: '', //电话
				idVal: '', //身份证
				weightVal: '', //物料重量	
				showing: true
			}
		},
		components: {
			DatetimePicker
		},
		mounted() {
			if (!this.orderNo) {
				this.showing = false
			} else {
				this.showing = true
			}
		},
		methods: {
			selectData() { //装车时间
				if (this.selectedValue) {
					this.dateVal = this.selectedValue
				} else {
					this.dateVal = new Date()
				}
				this.$refs['datePicker'].open()
			},
			dateConfirm() { // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
				this.selectedValue = formatDateMin(this.dateVal)
			},
			arriveData() { //预计到达时间
				if (this.arriveValue) {
					this.dateValue = this.arriveValue
				} else {
					this.dateValue = new Date()
				}
				this.$refs['datePickers'].open()
			},
			arriveConfim() {
				this.arriveValue = formatDateMin(this.dateValue)
			},
			//添加装车物料
			addMater() {
				if (!this.carNoVal) {
					TopTips({
						message: '请先填写车牌号',
						duration: 1000
					})
				}else if(!this.driverVal){
					TopTips({
						message: '请输入司机姓名',
						duration: 1000
					})
				}else if(checkMobile(this.phoneVal)==false){
					TopTips({
						message: '请输入正确的电话号码',
						duration: 1000
					})
				}else if(checkID(this.idVal)==false){
					TopTips({
						message: '请输入正确的身份证号',
						duration: 1000
					})
				}else if(!this.selectedValue){
					TopTips({
						message: '请选择装车时间',
						duration: 1000
					})
				}else if(!this.arriveValue){
					TopTips({
						message: '请选择到达时间',
						duration: 1000
					})
				}else{
					this.$router.push({
						path:'addTransportMaterial',
						query:{
							carNo:this.carNoVal,
							driver:this.driverVal,
							phone:this.phoneVal,
							idCard:this.idVal,
							uploadTime:this.selectedValue,
							planTime:this.arriveValue,
							weight:this.weightVal
						}
					})
				}
			}
		},
	}
</script>

<style>
	.transport-warp .essen_list p {
		height: 3.25rem;
		line-height: 3.25rem;
		border-bottom: 1px solid #e2e2e2;
		margin-top: 0;
	}

	.transport-warp .essen_list p:last-child {
		border-bottom: 0;
	}
</style>
